<template>
    <div class="loginview">
        <div class="toptab">
            <router-link to="/userinfo">
                <span class="iconfont icon-arrow-left-bold"></span>
            </router-link>

            <!-- icon-shezhi -->

            <h4>密码登录</h4>
            <span></span>
        </div>

        <div class="form">
            <div class="item">
                <!-- <span class="iconfont icon-jurassic_user"></span> -->
                <input type="text" placeholder="请输入 昵称/邮箱/ID" v-model="phone">
            </div>
            <div class="item">
                <!-- <span class="iconfont icon-mima"></span> -->
                <input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <p>忘记密码</p>
            <div class="item">
                <div class="submit" v-show="phone == '' || password == ''">登录</div>
                <div class="submitup" v-show="phone != '' && password != ''" @click="loginup()">登录</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            password: '',
            code: '',
        };
    },
    methods: {
        loginup() {
            window.localStorage.setItem("phone", this.phone);
            window.localStorage.setItem("password", this.password);
            this.$router.push("/userinfo")
        }
    }
}
</script>

<style lang="scss" scoped>
.loginview {
    background-color: #fff;
    // height: 100%;
    min-height: 667px;
    // width: 100%;
    padding: 0 14.5px;

    .toptab {
        display: flex;
        // padding:  14.5px;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
        padding-bottom: 10px;
        // text-align: center;

        position: fixed;
        width: 92%;
        background-color: #fff;

        h4 {
            font-size: 14px;
            font-weight: 600;
            // padding-right: 50px;
        }

        span {
            font-size: 20px;
            // padding: 0 18px;
        }
    }

    .form {
        // width: 100%;/

        padding: 0 30px;
        padding-top: 110px;
        display: flex;
        flex-direction: column;
        // align-items: center;

        .item {
            input {
                border: none;
                width: 100%;
                font-size: 18px;
                font-weight: 500;
                -ms-input-placeholder: #c9c9c9;
                padding: 15px 0;
                caret-color: #eb6000;
                border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
            }



            .submit {
                width: 100%;
                margin-top: 10px;
                display: flex;
                justify-content: center;
                padding: 12px 0;
                background-color: #f5f5f5;
                color: #e9e9e9;
                border-radius: 10px;
            }

            .submitup {
                width: 100%;
                margin-top: 10px;
                display: flex;
                justify-content: center;
                padding: 12px 0;
                background-color: #eb6000;
                color: #fffcfa;
                border-radius: 10px;
            }

        }

        p {
            font-size: 12px;
            color: #323232;
            display: flex;
            flex-direction: row-reverse;
            padding: 15px 0;

        }
    }
}
</style>